<template>
  <h1>一个人的信息(测试vue3添加删除属性)</h1>
  <h2 v-show="p.name">姓名：{{p.name}}</h2>
  <h2>年龄：{{p.age}}</h2>
  <h2 v-show="p.sex">性别：{{p.sex}}</h2>
  <h2>工作信息</h2>
  <h3>工作种类：{{p.job.type}}</h3>
  <h3>工作薪水：{{p.job.salary}}</h3>
  <h3>爱好：{{p.hobby}}</h3>
  <h3>测试的数据：{{p.job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button><br>
  <button @click="addSex">添加性别</button><br>
  <button @click="delName">删除姓名</button>
</template>

<script>
import {reactive} from 'vue' 

export default {
  name: 'Demo',
  setup() {
    let p = reactive({
      name: '张三',
      age: 19,
      job: {
        type: '前端工程师',
        salary: '30k',
        a: {
          b: {
            c: 666,
          }
        }
      },
      hobby: ['抽烟', '喝酒', '烫头']
    })


    function changeInfo() {
      console.log('修改数据前', p)

      p.name = '李四'
      p.age = 48
      p.job.type = '后端工程师'
      p.job.salary = '40k'
      p.job.a.b.c = 999
      p.hobby[2] = '学习'
      //vue3对比vue2的响应式：
      /*
        vue2中采用Object.defineProperty实现数据劫持，有2个场景不会触发响应式：
        1.对对象添加一个元素，删除一个元素。需要使用this.$set/Vue.set方法解决
        2.通过索引修改一个数组元素，需要使用this.$set/数组splice方法解决
        vue3中通过Proxy实现数据劫持，不会有上述问题
      */
      console.log('修改数据后', p)
    }

    function addSex() {
      p.sex = '女'
    }

    function delName() {
      delete p.name
    }

    return {
      p,
      changeInfo,
      addSex,
      delName,
    }
  }
}
</script>

<style>
</style>
